<template>
	<div class="sideBarDetailWrap">
        <p class="sdTip"><span>仅展示当前页面下的详情页</span></p>
        <ul class="tableBtnUl">
            <li class="tableBtnLi" 
                v-for="(item,index) in detailPageArray" :key="index"
                @click="toDetailPage(item)">
                <span class="tableBtnLabel">{{item.detailName}}</span>
                <el-button @click.stop="detailDeleteMet(item,index)" type="danger">删除</el-button>
            </li>
        </ul>
        <div class="btnArea">
            <el-button @click="cancelSidebarDetail">取消</el-button>
        </div>
	</div>
</template>
<script type="text/javascript">
	export default{
		data () {
			return {
				detailPageArray:[]
			}
		},
		mounted (){
            this.belongToDetail();
        },
        watch:{
            
        },
		components : {
			
		},
		methods : {
            async belongToDetail(){
                this.detailPageArray = [];
                var _this = this;
                let nowItem = this.$pinia.state.value.routeConfig.nowItem;
                let result = await this.$util.native.readRouterDetailJson();
                for(let i =0;i< result.length;i++){
                    let item = result[i];
                    if(item.belongTo == nowItem.name){
                        _this.detailPageArray.push(item);
                    }
                }
            },
            cancelSidebarDetail(){
                this.$emit("cancelSidebarDetail");
            },
            async detailDeleteMet(clickItem,index){
                //删除文件
                await this.$util.native.removeSyncJson(clickItem);
                //删除detailJson下的数据
                let result = await this.$util.native.readRouterDetailJson();
                let deleteIndex = -1;
                for(let i = 0; i < result.length;i++){
                    let item = result[i];
                    if(item.name == clickItem.name){
                        deleteIndex = i;
                        break;
                    }
                }
                result.splice(deleteIndex,1);
                //重新写入
                await this.$util.native.rewriteDetailRoute(result);
                //删除数据
                this.detailPageArray.splice(index,1);
            },
            toDetailPage(item){
                this.$emit("toDetailPage",item);
            }
		}
	}
</script>
<style type="text/css" lang="less">
	.sideBarDetailWrap{
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        background-color: white;
        z-index: 10;
        padding: 10px;
        .btnArea{
			margin-top:10px;
        }
        .sdTip{
            margin-top:25px;
            font-size:14px;
            color:#666;
        }
        .tableBtnUl{
            padding-left: 0;
            .tableBtnLi{
                border-bottom:1px solid #E5E6EC;
                height: 50px;
                cursor:pointer;
                .tableBtnLabel{
                    font-size: 14px;
                    line-height:50px;
                }
                .el-button{
                    float: right;
                    margin-top: 9px;
                }
            }
        }
    }
</style>